<template>
  <div class="container">
    <div class="shopping">
      <div class="box">
        <div class="tabs">
          <nav>
            <span></span>
            <div class="tab" :class="{ active: activeTab === '日淘' }" @click="activeTab = '日淘'">
              <span>日淘</span>
            </div>
            <div
              class="tab"
              :class="{ active: activeTab === '悠享购' }"
              @click="activeTab = '悠享购'"
            >
              <span>悠享购</span>
            </div>
            <span></span>
          </nav>

          <div class="text">
            <div class="left" style="margin-right: 6rem">
              站点
              <span style="padding: 0 5rem; font-weight: 700">全部</span>
              <span style="margin-right: 6rem">购买数量</span>
              <span style="color: #ff3d58; font-weight: 700">{{ cartStore.totalQuantity }}</span>
            </div>
            <div class="right">
              <span @click="toggleManage">{{ isManaging ? '取消' : '管理' }}</span>
            </div>
          </div>
        </div>

        <div v-if="activeTab === '日淘'">
          <div class="imga" v-if="cartStore.cartItems.length === 0">
            <img src="https://mall.leyifan.com/static/h5/new_images/empty.png" alt="" />
            <p>购物车为空</p>
            <button @click="jumpMore">查看更多商品</button>
          </div>
          <van-checkbox-group v-model="checked" ref="checkboxGroup" checked-color="#fe2105" v-else>
            <div class="get">
              <li
                v-for="(cartItem, index) in cartStore.cartItems"
                :key="index"
                style="list-style: none"
              >
                <div class="title">
                  <van-checkbox :name="cartItem.id"></van-checkbox>
                  <i>
                    <img
                      src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png"
                      alt=""
                    />
                  </i>
                  <div class="storename">卖家: {{ cartItem.item.seller.name }}</div>
                </div>
                <div class="main">
                  <!-- <div class="inp">
                    <input type="checkbox" :name="cartItem.id" v-if="isManaging" />
                  </div> -->
                  <div class="img">
                    <img
                      :src="
                        cartItem.item.productInfo.image.replace(
                          'https://static.mercdn.net',
                          'https://image1.leyifan.cn/mercari-cdn'
                        )
                      "
                      alt=""
                    />
                  </div>
                  <div class="mainright">
                    <p>{{ cartItem.item.productInfo.storeName }}</p>
                    <span style="color: #666; font-size: 12rem">属性: 默认</span>
                    <div class="money" style="font-size: 12rem; color: #ff3d58; font-weight: 700">
                      <span style="font-size: 18rem; font-weight: 700">{{
                        cartItem.item.productInfo.price * cartItem.stepperValue
                      }}</span
                      >日元
                      <span style="color: #666; font-weight: 700" class="price"
                        >约{{
                          cartItem.item.productInfo.convertPrice * cartItem.stepperValue
                        }}人民币</span
                      >
                    </div>
                    <div class="much" style="width: 205rem; display: flex; justify-content: end">
                      <van-stepper
                        v-model="cartItem.stepperValue"
                        :default-value="cartItem.num"
                        button-size="24px"
                        @change="(value) => updateQuantity(cartItem.id, value)"
                      />
                    </div>
                  </div>
                </div>
              </li>
            </div>
            <div class="btns" v-if="isManaging">
              <div class="check">
                <i @click="checkAll" v-if="!checkAllFlag">
                  <svg
                    t="1734336969301"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7949"
                    width="26rem"
                    height="26rem"
                  >
                    <path
                      d="M512 884.5c-50.3 0-99.1-9.9-145-29.3-44.4-18.8-84.2-45.6-118.4-79.8-34.2-34.2-61.1-74-79.8-118.4-19.4-45.9-29.3-94.7-29.3-145s9.9-99.1 29.3-145c18.8-44.4 45.6-84.2 79.8-118.4 34.2-34.2 74-61.1 118.4-79.8 45.9-19.4 94.7-29.3 145-29.3s99.1 9.9 145 29.3c44.4 18.8 84.2 45.6 118.4 79.8 34.2 34.2 61.1 74 79.8 118.4 19.4 45.9 29.3 94.7 29.3 145s-9.9 99.1-29.3 145c-18.8 44.4-45.6 84.2-79.8 118.4-34.2 34.2-74 61.1-118.4 79.8-45.9 19.4-94.7 29.3-145 29.3z m0-705c-183.3 0-332.5 149.1-332.5 332.5S328.7 844.5 512 844.5 844.5 695.3 844.5 512 695.3 179.5 512 179.5z"
                      p-id="7950"
                      fill="#cccccc"
                    ></path>
                  </svg>
                </i>
                <i @click="toggleAll" v-else>
                  <svg
                    t="1734331609258"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5940"
                    width="26rem"
                    height="26rem"
                  >
                    <path
                      d="M512 102.4c226.24 0 409.6 183.36 409.6 409.6S738.24 921.6 512 921.6 102.4 738.24 102.4 512 285.76 102.4 512 102.4z m245.184 260a17.088 17.088 0 0 0-20.96-0.768l-271.104 205.28a19.488 19.488 0 0 1-19.776 0.896l-102.624-63.904a16.224 16.224 0 0 0-20.352 3.136l-11.84 13.952c-5.12 5.984-4.16 14.304 1.6 19.68l126.816 118.208c9.344 8.64 24.192 9.024 33.28 0.608l290.944-271.2c6.08-5.664 6.528-14.272 0.704-19.68z"
                      fill="#fe2105"
                      p-id="5941"
                    ></path>
                  </svg>
                </i>
              </div>
              <div class="prices">
                <p style="font-size: 14rem; font-weight: 700">
                  合计:&nbsp;&nbsp;<span
                    style="color: #ff3d58; margin-left: 5rem; font-weight: 700; font-size: 18rem"
                    >{{ getTotal }}</span
                  ><span style="color: #ff3d58">日元</span>
                </p>
                <p style="color: #333; padding-left: 48rem; font-size: 12rem; font-weight: 700">
                  约{{ getTotal * 0.06 }}人民币
                </p>
              </div>
              <div class="buy">
                <span
                  >明细&nbsp;
                  <img
                    src="https://mall.leyifan.com/static/h5/new_images/icon_active_bottom.png"
                    alt=""
                  />
                </span>
                <button @click="deleteSelectedItems()">删除</button>
              </div>
            </div>
            <div class="btns" v-else>
              <div class="check">
                <i @click="checkAll" v-if="!checkAllFlag">
                  <svg
                    t="1734336969301"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7949"
                    width="26rem"
                    height="26rem"
                  >
                    <path
                      d="M512 884.5c-50.3 0-99.1-9.9-145-29.3-44.4-18.8-84.2-45.6-118.4-79.8-34.2-34.2-61.1-74-79.8-118.4-19.4-45.9-29.3-94.7-29.3-145s9.9-99.1 29.3-145c18.8-44.4 45.6-84.2 79.8-118.4 34.2-34.2 74-61.1 118.4-79.8 45.9-19.4 94.7-29.3 145-29.3s99.1 9.9 145 29.3c44.4 18.8 84.2 45.6 118.4 79.8 34.2 34.2 61.1 74 79.8 118.4 19.4 45.9 29.3 94.7 29.3 145s-9.9 99.1-29.3 145c-18.8 44.4-45.6 84.2-79.8 118.4-34.2 34.2-74 61.1-118.4 79.8-45.9 19.4-94.7 29.3-145 29.3z m0-705c-183.3 0-332.5 149.1-332.5 332.5S328.7 844.5 512 844.5 844.5 695.3 844.5 512 695.3 179.5 512 179.5z"
                      p-id="7950"
                      fill="#cccccc"
                    ></path>
                  </svg>
                </i>
                <i @click="toggleAll" v-else>
                  <svg
                    t="1734331609258"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="5940"
                    width="26rem"
                    height="26rem"
                  >
                    <path
                      d="M512 102.4c226.24 0 409.6 183.36 409.6 409.6S738.24 921.6 512 921.6 102.4 738.24 102.4 512 285.76 102.4 512 102.4z m245.184 260a17.088 17.088 0 0 0-20.96-0.768l-271.104 205.28a19.488 19.488 0 0 1-19.776 0.896l-102.624-63.904a16.224 16.224 0 0 0-20.352 3.136l-11.84 13.952c-5.12 5.984-4.16 14.304 1.6 19.68l126.816 118.208c9.344 8.64 24.192 9.024 33.28 0.608l290.944-271.2c6.08-5.664 6.528-14.272 0.704-19.68z"
                      fill="#fe2105"
                      p-id="5941"
                    ></path>
                  </svg>
                </i>
              </div>
              <div class="prices">
                <p style="font-size: 14rem; font-weight: 700">
                  合计:&nbsp;&nbsp;<span
                    style="color: #ff3d58; margin-left: 5rem; font-weight: 700; font-size: 18rem"
                    >{{ getTotal }}</span
                  ><span style="color: #ff3d58">日元</span>
                </p>
                <p style="color: #333; padding-left: 48rem; font-size: 12rem; font-weight: 700">
                  约{{ Math.round(totalPrice * 0.0049) }}人民币
                </p>
              </div>
              <div class="buy">
                <span
                  >明细&nbsp;
                  <img
                    src="https://mall.leyifan.com/static/h5/new_images/icon_active_bottom.png"
                    alt=""
                  />
                </span>
                <button @click="buy()">立即下单</button>
              </div>
            </div>
          </van-checkbox-group>
        </div>

        <div v-else>
          <div class="imga">
            <img src="https://mall.leyifan.com/static/h5/new_images/empty.png" alt="" />
            <p>购物车为空</p>
            <button>去添加代购商品</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- // shoppingCartView.vue -->
<script lang="ts" setup>
import { ref, watch, computed, toValue } from 'vue'
import { useCartStore } from '@/stores/useCartStore'
import { useRouter } from 'vue-router'
import { useOrderStore } from '@/stores/useOrderStore'

const cartStore = useCartStore()
const orderStore = useOrderStore()
const activeTab = ref('日淘') // 默认选中的选项卡
let checkAllFlag = ref(false)
let checked = ref([])
let checkboxGroup = ref(null)
let router = useRouter()
let totalPrice = ref(0)
let isManaging = ref(false)

const deleteSelectedItems = () => {
  // 过滤掉选中的商品
  cartStore.cartItems = cartStore.cartItems.filter((item) => !checked.value.includes(item.id))
  // 清空选中的数组
  checked.value = []
  // 刷新总价
  totalPrice.value = 0
  // 将更新后的购物车数据保存到 localStorage
  localStorage.setItem('cart', JSON.stringify(cartStore.cartItems))
}
const jumpMore = () => {
  router.push({path:'/category', query: {value: "mercari"} })
}
const toggleManage = () => {
  isManaging.value = !isManaging.value
}
const checkAll = () => {
  checkboxGroup.value.toggleAll(true)
  checkAllFlag.value = true
}
// const toggleCollect = () => {
//   isDown.value = !isDown.value
// }
// const toggleAll = () => {
//   checkboxGroup.value.toggleAll()
//   checkAllFlag.value = false
// }

cartStore.cartItems.forEach((item) => {
  item.stepperValue = ref(item.num) // 初始化为当前数量
})

// 更新商品数量
const updateQuantity = (id: number, quantity: number) => {
  cartStore.updateItemQuantity(id, quantity)
}

const buy = function () {
  const selectedItems = cartStore.cartItems
    .filter((item) => checked.value.includes(item.id))
    .map((item) => ({
      id: item.id,
      name: item.item.productInfo.storeName,
      imgurl: item.item.productInfo.image.replace(
        'https://static.mercdn.net',
        'https://image1.leyifan.cn/mercari-cdn'
      ),
      num: item.num,
      price: item.item.productInfo.price * item.num,
    }))
  deleteSelectedItems()
  orderStore.setOrderItems(selectedItems)
  router.push({
    path: '/placeorder',
  })
}

// 监听选中的商品变化，计算总价
// watch(
//   () => checked.value,
//   (newVal) => {
//     checkAllFlag.value = newVal.length === cartStore.cartItems.length
//     totalPrice.value = newVal.reduce((total, id) => {
//       const item = cartStore.cartItems.find((cartItem) => cartItem.id === id)
//       if (item) {
//         return total + (item.item.productInfo.price * item.num);
//       }
//       return total
//     }, 0)
//   }
// )

watch(
  () => checked.value,
  (newVal) => {
    console.log('newVal', newVal);
    
    let flag = newVal.length === cartStore.cartItems.length
    if (flag) {
      checkAllFlag.value = true
    } else {
      checkAllFlag.value = false
    }
  }
)

const getTotal = computed(() => {
  let newArray = []
  // console.log('cartStore.cartItems', checked.value);
  checked.value.forEach((id) => {
    const item = cartStore.cartItems.find((cartItem) => cartItem.id === id)
    newArray.push(item)
  })
  return newArray.reduce((total, item) => {
    return total + item.item.productInfo.price * item.num
  }, 0)
})
</script>


<style lang="less" scoped>
.container {
  width: 375rem;
  height: 100vh;
  background-image: url(https://mall.leyifan.com/static/h5/new_images/shopping_bg.png);
  background-size: 100% 250rem;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: #f4f4f4;

  .shopping {
    .box {
      background-color: #f4f4f4;
      height: 100%;

      .tabs {
        z-index: 66;
        width: 375rem;
        height: 100rem;
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        background-image: url(https://mall.leyifan.com/static/h5/new_images/shopping_bg.png);
        background-size: 100% 250rem;
        background-position: 0 0;
        background-repeat: no-repeat;
        position: fixed;
        top: 0;

        nav {
          display: flex;
          justify-content: space-around;

          .tab {
            padding: 10px 20px;
            cursor: pointer;
            color: #aaa;
            font-weight: 700;

            &.active {
              span {
                color: #333;
                font-weight: bold;
                position: relative;
                display: block;
                z-index: 1;

                &::after {
                  content: '';
                  width: 100%;
                  display: block;
                  position: absolute;
                  z-index: -1;
                  height: 4rem;
                  background: linear-gradient(270deg, #fff9d2, #ff8192);
                  border-radius: 2px;
                  left: 0;
                  bottom: 4rem;
                }
              }
            }
          }
        }

        .text {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          height: 26rem;
          padding: 0 14rem;
          margin: 14rem 0;
        }
      }

      .imga {
        width: 100%;
        padding-top: 183rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 115rem;
          height: 115rem;
          display: block;
        }

        p {
          font-size: 12rem;
          color: rgb(170, 170, 170);
        }

        button {
          width: 128rem;
          height: 38rem;
          color: #fff;
          border-radius: 19rem;
          line-height: 38rem;
          margin-top: 20rem;
          font-size: 14rem;
          background-color: #ff3d58;
          border: none;
        }
      }

      .get {
        width: 375rem;
        padding: 114rem 14rem 120rem 14rem;

        li {
          width: 100%;
          padding: 16rem 10rem;
          background-color: white;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          margin-bottom: 16px;

          i {
            display: flex;
            align-items: end;

            img {
              height: 22rem;
            }
          }

          .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 22rem;
            margin-bottom: 20rem;

            .storename {
              width: 205rem;
              height: 16rem;
              line-height: 16rem;
              overflow: hidden;
              text-wrap: nowrap;
              text-overflow: ellipsis;
              font-size: 12rem;
              color: #333;
            }
          }

          .main {
            padding-left: 30rem;
            display: flex;
            align-items: start;
            position: relative;
            .inp {
              width: 20rem;
              height: 20rem;
              margin-top: 26rem;
              position: absolute;
              left: 0;
            }
            .img {
              flex-shrink: 0;
              width: 78rem !important;

              img {
                width: 78rem !important;
                height: 78rem;
              }
            }

            .mainright {
              height: 100rem;
              margin-left: 12rem;

              p {
                display: block;
                width: 205rem;
                height: 19rem;
                overflow: hidden;
                text-wrap: nowrap;
                text-overflow: ellipsis;
                font-size: 14rem;
                color: #666;
              }
            }
          }
        }
      }

      .btns {
        position: fixed;
        bottom: 49rem;
        left: 0;
        background-color: #fff;
        width: 375rem;
        height: 66rem;
        padding: 14rem;
        display: flex;
        align-items: top;

        .chexk {
          i {
            display: flex;
            align-items: center;
          }
        }

        .prices {
          margin-left: 14rem;
          width: 160rem;
          display: flex;
          flex-direction: column;
          height: 45rem;
        }

        .buy {
          margin-left: auto;
          display: flex;
          align-items: center;

          span {
            display: flex;
            align-items: center;
            font-size: 14rem;
            color: #ff3d58;

            img {
              width: 10rem;
              height: 10rem;
            }
          }

          button {
            border: 0;
            color: #fff;
            font-size: 14px;
            border-radius: 19px;
            margin-left: 9px;
            background-color: #ff3d58;
            width: 96px;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 38px;
          }
        }
      }
    }
  }
}
</style>